<template>
  <div class="newcomerGift">
    <van-divider
      :style="{ color: 'black', borderColor: 'black', padding: '0 7.1875rem' }"
    >
      新人专享礼
    </van-divider>
    <van-row>
      <van-col span="8" style="margin-right: 10px">
        <h4>新人专享礼包</h4>
        <img
          src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png"
        />
      </van-col>
      <van-col span="8">
        <van-col span="6">
          <h4>福利社</h4>
          <p>今日特价</p>
          <img src="../../lmy/images/fuli.jpg" />
        </van-col>
        <van-col span="6">
          <h4>新人拼团</h4>
          <p><van-tag color="#cbb693" text-color="">1元起包邮</van-tag></p>
          <img src="../../lmy/images/pintuan.jpg" alt="" />
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.newcomerGift .van-row {
  display: flex;
  justify-content: center;
}

.newcomerGift .van-row .van-col--8 {
  width: 10.75rem;
  height: 13.625rem;
}

.newcomerGift .van-col--8:first-child {
  background: #f9e9cf;
  padding: 0.9375rem 0.9375rem;
}

.newcomerGift .van-col--8:first-child h4 {
  margin-bottom: 1.9375rem;
}

.newcomerGift .van-col--8:first-child img {
  width: 8.125rem;
  height: 8.125rem;
}

.newcomerGift .van-col--8:last-child {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.newcomerGift .van-col--8 .van-col--6 {
  width: 100%;
  height: 6.75rem;
  padding: 0.9375rem 0.9375rem;
  position: relative;
}

.newcomerGift .van-col--8 .van-col--6 img {
  position: absolute;
  top: 0.9375rem;
  right: 0.9375rem;
}

.newcomerGift .van-col--8 .van-col--6 p {
  font-size: 0.6875rem;
  color: #888685;
}

.newcomerGift .van-col--6:first-child {
  background: #fbe2d3;
}

.newcomerGift .van-col--6:last-child {
  background: #fdecc2;
}

.newcomerGift .van-row--justify-space-between {
  flex-direction: column;
}
</style>